<template>
	<view>
		<view>
			<u-navbar title="个人中心" :autoBack="true"> </u-navbar>
			<view class="header">
				<view class="userinfo">
					<view style="
              display: flex;
              justify-content: space-between;
              width: 100%;
              align-items: center;
            ">
						<view class="info" v-if="dlstatus == 0">
							<view class="username">
								<button class="text-button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
									点击登录
								</button>
							</view>
						</view>
						<view v-else class="user-info-container">
							<view class="phone-number" @click="state.on_of = true">
								<view>
									{{ userinfo.company_name }}
								</view>
								<view>
									{{ userinfo.phone }}
								</view>
							</view>
							<view class="company-info">
								{{ userinfo.company_type_name }}
								<span v-if="userinfo.company_status != 3" class="status-badge">
									({{ userinfo.company_status_name }})
								</span>
							</view>
						</view>
						<I-Images :src="userinfo.face" shape="circle" round="10px" width="65px" height="65px" lazyLoad
							showLoading showError fade duration="800" bgColor="#fff" @load="onImageLoad"
							@error="onImageError" @click="state.on_of = true">
						</I-Images>
					</view>
					<view class="user-stats" v-if="dlstatus == 1">
						<view class="stat-item">
							<view class="stat-value">{{ userinfo.balance }}</view>
							<view class="stat-label">余额</view>
						</view>
						<view class="stat-item">
							<view class="stat-value">{{ userinfo.ji_fen }}</view>
							<view class="stat-label">积分</view>
						</view>
						<view class="stat-item" v-if="userinfo.income">
							<view class="stat-value">{{ userinfo.income }}</view>
							<view class="stat-label">佣金金额</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="header">
        <view class="userinfo">
          <view class="face">
            <I-Images
              :src="userinfo.face"
              shape="circle"
              round="10px"
              width="65px"
              height="65px"
              lazyLoad
              showLoading
              showError
              fade
              duration="800"
              bgColor="#fff"
              @load="onImageLoad"
              @error="onImageError"
              @click="onImageClick"
            >
            </I-Images>
          </view>
          <view class="info" v-if="dlstatus == 0">
            <view class="username">
              <button
                class="text-button"
                open-type="getPhoneNumber"
                @getphonenumber="getPhoneNumber"
              >
                点击登录
              </button>
            </view>
          </view>
          <view class="info" v-if="dlstatus == 1">
            <view class="username">
              <button class="text-button">{{ userinfo.phone }}</button>
            </view>
            <view style="color: whitesmoke; margin: 2px 10px; font-size: 30rpx">
              {{ userinfo.company_type_name }}
              <span
                v-if="
                  userinfo.company_status != 3 &&
                  userinfo.company_status != 1 &&
                  userinfo.company_status != 0
                "
              >
                (
                {{
                  userinfo.company_status == 2
                    ? "审核中"
                    : userinfo.company_status == 3
                    ? "审核通过"
                    : userinfo.company_status == 4
                    ? "审核拒绝"
                    : ""
                }})
              </span>
            </view>
            <view class="user-assets">
              <view class="asset-item">
                <text class="asset-label">余额</text>
                <text class="asset-value">{{ userinfo.balance }} 元</text>
              </view>
              <view class="asset-divider"></view>
              <view class="asset-item">
                <text class="asset-label">积分</text>
                <text class="asset-value">{{ userinfo.ji_fen }}</text>
              </view>
            </view>
            <view class="user-assets" v-if="userinfo.income" style="">
              <view class="asset-item">
                <text class="asset-label">佣金金额:</text>
                <text class="asset-value">{{ userinfo.income }} 元</text>
              </view>
            </view>
          </view>
        </view>
        <view class="setting" @click="state.on_of = true">
          <image
            :src="getResource(`img/phone/HM-PersonalCenter/sever/setting.png`)"
          ></image>
        </view>
      </view> -->
			<view class="orders">
				<view class="box">
					<view class="label" v-for="(row, index) in orderTypeLise" :key="row.name" hover-class="hover"
						@tap="dianji(row)">
						<view class="icon">
							<view class="badge" v-if="row.badge > 0">{{ row.badge }}</view>
							<image :src="getResource(`img/phone/HM-PersonalCenter/${row.icon}`)"></image>
						</view>
						{{ row.name }}
					</view>
				</view>
			</view>
			<view style="padding-bottom: 10vh">
				<!-- <scroll-view scroll-y="true" style="height: 80vh"> </scroll-view> -->
				<view class="list" v-for="(list, list_i) in severList" :key="list_i">
					<view class="li" v-for="(li, li_i) in list" @tap="toPage(list_i, li_i)"
						v-bind:class="{ noborder: li_i == list.length - 1 }" hover-class="hover" :key="li.name">
						<view class="icon">
							<image :src="
                  getResource(`img/phone/HM-PersonalCenter/sever/${li.icon}`)
                "></image>
						</view>
						<view class="text">{{ li.name }}
							<span v-if="li.id == 3"
								style="color: red; font-size: 16px">({{ userinfo.notice_not_read_count }})</span>
						</view>
					</view>
					<view class="li" hover-class="hover" style="justify-content: space-between">
						<view style="display: flex">
							<view class="icon">
								<image :src="getResource(`img/phone/HM-PersonalCenter/sever/v.png`)"></image>
							</view>
							<view class="text">系统版本 </view>
						</view>
						<view> v_{{ version }} </view>
					</view>
					<view class="li" hover-class="hover" style="justify-content: space-between" @click="quit()">
						<view style="display: flex">
							<view class="icon">
								<image :src="
                    getResource(`img/phone/HM-PersonalCenter/sever/quit.png`)
                  "></image>
							</view>
							<view class="text">退出登录 </view>
						</view>
						<!-- <view> v_{{ version }} </view> -->
					</view>
				</view>
				<cardPopup v-model="chongzhi" />
			</view>
		</view>

		<view class="tabbar-wrapper">
			<Tabbar :index="4" />
		</view>
		<u-wx-auth ref="wxAuthRef" :show="state.on_of" :logo="state.logo" :title="state.title" :tips="tips"
			:confirm-text="state.confirmText" @choose-avatar="onChooseAvatar" @confirm="onConfirm"
			@close="state.on_of = false"></u-wx-auth>
		<u-popup :show="show" mode="center" round="0" closeable customStyle="background: transparent;"
			@close="show = false">
			<view style="height: 70vh; width: 90vw; position: relative">
				<image :src="src" mode="aspectFill" style="width: 100%; height: 100%"></image>
			</view>
		</u-popup>
		<liuYanPing :showCommentPopup="showCommentPopup" @UpClose="UpClose" />
	</view>
</template>
<script setup>
	import {
		ref,
		onMounted,
		getCurrentInstance,
		toRefs,
		reactive
	} from "vue";
	import {
		showToast
	} from "../../utils/toast";
	import {
		putLoginInfo,
		getLoginInfo
	} from "../../api/userInfo";
	import {
		getResource
	} from "../../utils/Resource.js";
	const version = ref("1.0.0");
	const {
		proxy
	} = getCurrentInstance();
	const state = reactive({
		showCommentPopup: false,
		title: "",
		logo: "",
		on_of: false,
		confirmText: "确认授权",
	});
	state.title = import.meta.env.VITE_API_TITLE;
	state.logo = getResource("img/phone/logo.png");

	const form = ref({
		encryptedData: "",
		iv: "",
		nickName: "",
		avatarUrl: "",
		gender: "",
		code: "",
	});

	// 服务列表
	const severList = ref([
		[{
				name: "我的消息",
				icon: "quan.png",
				badge: 1,
				id: 3,
			},
			{
				name: "发布留言",
				icon: "liuYan.png",
				id: 14,
			},
			{
				name: "我的推广码",
				icon: "momey.png",
				id: 4,
			},
			{
				name: "余额充值",
				icon: "renw.png",
				id: 6,
			},
			{
				name: "积分明细",
				icon: "mingxi.png",
				id: 7,
			},
			{
				name: "余额明细",
				icon: "addr.png",
				id: 8,
			},
			{
				name: "推广提现",
				icon: "bank.png",
				id: 9,
			},
			{
				name: "投诉建议",
				icon: "kefu.png",
				id: 10,
			},
			{
				name: "银行卡认证",
				icon: "yinhang.png",
				id: 11,
			},
		],
	]);

	const data = reactive({
		userInfo: {
			avatar: "", // 头像服务器存储地址
			avatar_show: "", // 头像显示地址
			nickname: "", // 昵称
		},
		rules: {},
	});
	const {
		userInfo
	} = toRefs(data);
	const {
		showCommentPopup
	} = toRefs(state);
	const UpClose = async () => {
		showCommentPopup.value = false;
	};
	//小程序获取code
	const getWxCode = () => {
		wx.login({
			success: (res) => {
				form.value.code = res.code;
				console.log("预获取code成功:", res);
				// 这里可以继续发送 code 到后端获取 token
				// sendCodeToBackend(wxCode.value);
			},
			fail: (err) => {
				console.error("获取code失败:", err);
			},
		});
	};

	const chongzhi = ref(false);
	const customMoney = ref(0);

	const userinfo = ref({
		face: getResource("img/phone/HM-PersonalCenter/face.jpeg"),
		username: "VIP会员10240",
		integral: "1435",
		company_status_name: "",
		balance: 0,
	});
	const show = ref(false);
	// 订单类型列表
	const orderTypeLise = ref([{
			name: "我的需求",
			icon: "l1.png",
			badge: 0,
			id: 1,
		},
		{
			name: "我的订单",
			icon: "l2.png",
			badge: 0,
			id: 2,
		},
		{
			name: "成交记录",
			icon: "l3.png",
			badge: 0,
			id: 3,
		},
		{
			name: "推广中心",
			icon: "l4.png",
			badge: 0,
			id: 4,
		},
		{
			name: "售后服务",
			icon: "l5.png",
			badge: 0,
			id: 5,
		},
	]);

	// // 用户点击列表项
	const toPage = (list_i, e) => {
		switch (Number(severList.value[0][e].id)) {
			case 1: //注册中心
				setTimeout(() => {
					uni.navigateTo({
						// url: "/pages/user/xieyi",
						url: "/pages/newsreg/index",
					});
				}, 300);

				break;

			case 2:
				uni.navigateTo({
					url: `/pages/user/mycomponinfo?company_type=${userinfo.value.company_type}`,
				});
				break;
			case 4:
				if (userinfo.value.company_status == 3) {
					// show.value = true;
					uni.navigateTo({
						url: `/pages/user/my_tuiguang_details?img=${userinfo.value.share_img_show}`,
					});
				} else {
					uni.showToast({
						icon: "error",
						duration: 2500,
						title: "审核通过后生成推广码",
					});
				}

				break;
			case 3: //我的消息
				setTimeout(() => {
					uni.navigateTo({
						url: "/pages/user/my_message",
					});
				}, 300);
				break;
			case 6:
				chongzhi.value = true;
				break;

			case 7: //积分明细
				uni.navigateTo({
					url: "/pages/user/points_Details",
				});
				break;
			case 8: //余额明细
				uni.navigateTo({
					url: "/pages/user/Balance_Details",
				});
				break;
			case 9: //提现
				uni.navigateTo({
					url: "/pages/user/my_jiLu",
				});
				break;
			case 10: //提现
				uni.navigateTo({
					url: "/pages/user/component/wenTi",
				});
				break;
			case 11: //认证
				uni.navigateTo({
					url: "/pages/user/authentication",
				});
				break;
			case 12: //我的找人
				uni.navigateTo({
					url: "/pages/user/component/recruit/index?type=1",
				});
			case 13: //我的报名
				uni.navigateTo({
					url: "/pages/user/component/recruit/index?type=2",
				});
				break;
			case 14: //发布留言
				showCommentPopup.value = true;
				break;
		}
	};
	const quit = async () => {
		uni.clearStorage({
			success: () => {
				console.log("清除缓存成功");
				uni.reLaunch({
					url: "/pages/user/index",
				});
			},
			fail: (error) => {
				console.error("清除缓存失败:", error);
			},
		});
	};
	const getPhoneNumber = async (e) => {
		console.log(e);

		uni.showLoading({
			title: "登录中...",
		});

		if (e.detail.errMsg !== "getPhoneNumber:ok") {
			uni.hideLoading();
			uni.showToast({
				title: "未授权手机号",
				icon: "error",
			});
			return false;
		}

		form.value.encryptedData = e.detail.encryptedData;
		form.value.iv = e.detail.iv;

		try {
			// 检查登录态是否过期
			await checkSession();

			// 获取用户信息
			const userInfo = await getUserInfo();
			form.value.nickName = userInfo.nickName;
			form.value.avatarUrl = userInfo.avatarUrl;
			form.value.gender = userInfo.gender;

			// 调用登录接口
			minilogin();
		} catch (err) {
			console.error("登录失败", err);
			uni.showToast({
				title: "登录失败",
				icon: "error",
			});
		} finally {
			uni.hideLoading();
		}
	};

	const checkSession = () => {
		return new Promise((resolve, reject) => {
			wx.checkSession({
				success: resolve,
				fail: reject,
			});
		});
	};
	// 页面加载时执行
	const minilogin = () => {
		proxy
			.$http({
				url: "loginmini",
				data: form.value,
				method: "POST",
			})
			.then((res) => {
				// console.log(123123123, res);
				// return res.data
				if (res.data.code == 10000) {
					uni.setStorageSync("token", res.data.data.token);
					uni.showToast({
						icon: "success",
						title: "登录成功,跳转首页",
						duration: 2000,
					});

					if (res.data.data.company_type == 0) {
						uni.reLaunch({
							// url: "/pages/newsreg/newsreg",
							url: "/pages/newsreg/index",
						});
					} else {
						setTimeout(() => {
							uni.reLaunch({
								url: "/pages/index/index",
							});
						}, 2000);
					}
				}
			});
	};

	const getUserInfo = async () => {
		return new Promise((resolve, reject) => {
			wx.getUserInfo({
				success: (res) => resolve(res.userInfo),
				fail: reject,
			});
		});
	};
	const src = ref("");
	const getuserinfo = async () => {
		try {
			const res = await getLoginInfo();
			if (
				Number(res.data.company_type) != 1 &&
				res.data.company_type != undefined
			) {
				severList.value[0].unshift({
					name: "我的找人",
					icon: "zhao.png",
					id: 12,
				});
			} else {
				severList.value[0].unshift({
					name: "我的报名",
					icon: "bao.png",
					id: 13,
				});
			}
			// res.data.company_status != 0 && res.data.company_status != undefined
			if (res.data.company_status == 0 || res.data.company_status == 1) {
				severList.value[0].unshift({
					name: "注册中心",
					icon: "point.png",
					id: 1,
					show: false,
				});
			} else {
				severList.value[0].unshift({
					name: "我的资料",
					icon: "point.png",
					id: 2,
				});
			}
			uni.setStorage({
				key: "userinfo",
				data: res.data,
			});
			orderTypeLise.value[0].badge = res.data.need_count;
			userinfo.value = res.data;
			userinfo.value.face = res.data.avatar_show ?
				res.data.avatar_show :
				"../../static/logo.png";

			// if (r.data.data.company_status > 1) {
			//   severList.value[0][0].name = "我的资料";
			//   src.value = "https://dian18.cn" + r.data.data.share_img;
			// }
		} catch (error) {}
	};

	const dlstatus = ref(0);
	onMounted(() => {
		const accountInfo = uni.getAccountInfoSync();
		console.log(accountInfo);
		let v = accountInfo.miniProgram.version;
		console.log(v && v !== "" && v.length !== 0);
		if (v && v !== "" && v.length !== 0) {
			version.value = v; // 小程序 版本号
		}

		// init()
		let token = uni.getStorageSync("token");
		// console.log(token);
		if (!token) {
			// #ifdef H5
			const isH5 = ref(1);
			getH5code();
			// #endif

			// #ifdef MP-WEIXIN
			const isMiniProgram = ref(1);
			getWxCode();
			// #endif
		} else {
			dlstatus.value = 1;
			getuserinfo();
		}
	});
	const dianji = (e) => {
		console.log(e);
		if (userinfo.value.company_status != 3) {
			uni.showToast({
				icon: "error",
				duration: 2500,
				title: "审核通过后可查看",
			});
		}
		switch (e.id) {
			case 1:
				uni.navigateTo({
					url: "/pages/user/component/needList",
				});

				break;
			case 2:
				uni.navigateTo({
					url: "/pages_index/user/component/indentList?type=1",
				});
				break;
			case 3:
				break;
			case 4:
				uni.navigateTo({
					url: "/pages/user/my_tuiguang",
				});
		}
	};

	const chongzhilist = ref([]);

	const openchongzhi = () => {
		proxy
			.$http({
				url: "WechatUserBalance/indexRechargeBalance",
			})
			.then((r) => {
				console.log(r);
				chongzhilist.value = r.data.data;
			});
	};
	// openchongzhi();
	const currentSelected = ref(null);
	const recharge_id = ref(null);
	const handleRecharge = (item, index) => {
		// 重置所有项的selected状态
		chongzhilist.value.forEach((item) => {
			item.selected = false;
		});

		// 设置当前项为选中状态
		chongzhilist.value[index] = {
			...item,
			selected: true,
		};

		currentSelected.value = item.value;
		recharge_id.value = item.id;

		// 这里可以添加你的充值逻辑
		console.log("选择了充值金额：", item.value);
	};

	// 上传文件到服务器
	const uploadFilePromise = (filePath) => {
		return new Promise((resolve, reject) => {
			uni.uploadFile({
				url: "https://dian18.cn/upload/image",
				filePath: filePath,
				name: "file",
				header: {
					Authorization: "Bearer " + uni.getStorageSync("token"),
				},
				formData: {
					file_type: "2",
					type: "avatar",
				},
				success: (res) => {
					const data = JSON.parse(res.data);
					if (data.code == 10000 && data.data?.url) {
						resolve(data.data.url);
					} else {
						reject(new Error(data.msg || "上传失败"));
					}
				},
				fail: (err) => {
					reject(err);
				},
			});
		});
	};
	const onChooseAvatar = async (e) => {
		const tempUrl = e;
		if (!tempUrl) {
			showToast("获取头像失败");
			return;
		}
		// 上传临时头像到服务器
		const result = await uploadFilePromise(tempUrl);
		console.log(result);
		userInfo.value.avatar = result;
		userInfo.value.avatar_show = getResource(result);
	};
	const onConfirm = async (data) => {
		// if (data.nickname && data.nickname.length > 6) {
		//   showToast("昵称不能超过6个字");
		//   return;
		// }
		userInfo.value.nickname = data.nickname;
		console.log(userInfo.value);
		const res = await putLoginInfo(userInfo.value);
		showToast(res.message);
		state.on_of = false;
		await getuserinfo();
	};
	const information = () => {
		uni.navigateTo({
			url: "/pages/user/ce/ce",
		});
	};
</script>

<style lang="scss" scoped>
	/* 样式部分 */
	.user-info-container {
		display: flex;
		flex-direction: column;
		gap: 8rpx;

		.phone-number {
			font-size: 35rpx;
			color: #fff;
			font-weight: bolder;
			cursor: pointer;
		}

		.company-info {
			color: #fff;
			font-size: 28rpx;
		}

		.status-badge {
			margin-left: 4rpx;
			color: #fff;
		}
	}

	// 数据统计区域
	.user-stats {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 16rpx;
		padding-top: 24rpx;
		margin-top: 16rpx;
		width: 100%;
		position: relative;
		z-index: 1;

		.stat-item {
			text-align: center;
			padding: 16rpx 0;
			position: relative;
			background-color: rgba(255, 255, 255, 0.08);
			border-radius: 16rpx;
			backdrop-filter: blur(4rpx);
			transition: background-color 0.2s ease;

			// 统计项hover交互
			&:hover {
				background-color: rgba(255, 255, 255, 0.12);
			}

			.stat-value {
				font-size: 36rpx;
				color: #fff;
				font-weight: 600;
				margin-bottom: 8rpx;
				text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
				transition: transform 0.2s ease;

				&:hover {
					transform: translateY(-2rpx);
				}
			}

			.stat-label {
				font-size: 24rpx;
				color: rgba(255, 255, 255, 0.8);
			}
		}
	}

	page {
		background-color: #fff;
	}

	:deep(.u-navbar__content__left) {
		display: none !important;
	}

	.header {
		&.status {
			padding-top: var(--status-bar-height);
		}

		padding-bottom: 15px;
		background: linear-gradient(135deg, #4a6cf7, #2546f0);
		// background-color: #ff6364;
		width: 92%;
		height: 40vw;
		padding: 0 4%;
		padding-top: 50rpx !important;
		padding-bottom: 20rpx !important;

		display: flex;
		align-items: center;
		margin-top: 150rpx;

		.userinfo {
			margin-top: 20prx;
			width: 90%;
			margin: 0 auto;
			// display: flex;
			// align-items: center;

			.face {
				flex-shrink: 0;
				width: 15vw;
				height: 15vw;

				image {
					width: 100%;
					height: 100%;
					border-radius: 100%;
				}
			}

			.info {
				display: flex;
				flex-flow: wrap;
				padding-left: 0.9375rem;
				flex-wrap: nowrap;
				flex-direction: column;

				.username {
					width: 100%;
					color: #fff;
					font-size: 40upx;
					margin: 0 10px;
				}

				.user-assets {
					display: flex;
					gap: 20rpx;
					margin-top: 8rpx;
					align-items: center;

					.asset-item {
						display: flex;
						align-items: center;
						gap: 8rpx;
						padding: 8rpx 24rpx;
						background-color: rgba(255, 255, 255, 0.15);
						border-radius: 60rpx;
						font-size: 26rpx;
						color: #fff;
					}

					.asset-divider {
						width: 2rpx;
						height: 28rpx;
						background-color: rgba(255, 255, 255, 0.3);
					}

					.asset-label {
						opacity: 0.9;
					}

					.asset-value {
						font-weight: 500;
					}
				}

				.integral {
					display: flex;
					align-items: center;
					padding: 0 20upx;
					height: 40upx;
					color: #fff;
					background-color: rgba(0, 0, 0, 0.1);
					border-radius: 20upx;
					font-size: 24upx;
				}

				.integral1 {
					display: flex;
					align-items: center;
					padding: 0 20upx;
					height: 40upx;
					color: #fff;
					background-color: rgba(0, 0, 0, 0.1);
					border-radius: 20upx;
					font-size: 24upx;
				}
			}
		}

		.setting {
			flex-shrink: 0;
			width: 6vw;
			height: 6vw;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.hover {
		background-color: #eee;
	}

	.orders {
		background: linear-gradient(135deg, #4a6cf7, #2546f0);
		// background-color: #ff6364;
		width: 92%;
		height: 11vw;
		padding: 0 4%;
		margin-bottom: calc(11vw + 40upx);
		display: flex;
		align-items: flex-start;
		border-radius: 0 0 100% 100%;
		margin-top: -1upx;

		.box {
			width: 98%;
			padding: 0 1%;
			height: 22vw;
			background-color: #fefefe;
			border-radius: 24upx;
			box-shadow: 0 0 20upx rgba(0, 0, 0, 0.15);
			margin-bottom: 40upx;
			display: flex;
			align-items: center;
			justify-content: center;

			.label {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-flow: wrap;
				width: 100%;
				height: 16vw;
				color: #666666;
				font-size: 26upx;

				.icon {
					position: relative;
					width: 7vw;
					height: 7vw;
					margin: 0 1vw;

					.badge {
						position: absolute;
						width: 4vw;
						height: 4vw;
						background-color: #ec6d2c;
						top: -1vw;
						right: -1vw;
						border-radius: 100%;
						font-size: 20upx;
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
						z-index: 10;
					}

					image {
						width: 7vw;
						height: 7vw;
						z-index: 9;
					}
				}
			}
		}
	}

	.list {
		width: 100%;
		border-bottom: solid 26upx #f1f1f1;

		.li {
			width: 92%;
			height: 100upx;
			padding: 0 4%;
			border-bottom: solid 1upx #e7e7e7;
			display: flex;
			align-items: center;

			&.noborder {
				border-bottom: 0;
			}

			.icon {
				flex-shrink: 0;
				width: 50upx;
				height: 50upx;

				image {
					width: 50upx;
					height: 50upx;
				}
			}

			.text {
				padding-left: 20upx;
				width: 100%;
				color: #666;
			}

			.to {
				flex-shrink: 0;
				width: 40upx;
				height: 40upx;
			}
		}
	}

	.text-button {
		background: none !important;
		/* 去掉背景 */
		border: none !important;
		/* 去掉边框 */
		padding: 0 !important;
		/* 去掉内边距 */
		margin: 0 !important;
		/* 去掉外边距 */
		color: #ffffff !important;
		/* 设置文字颜色（示例蓝色） */
		font-size: 16px !important;
		/* 设置文字大小 */
		line-height: 1.5 !important;
		display: inline !important;
		/* 行内显示（像普通文本） */
	}

	.tabbar-wrapper {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 50px;
		z-index: 999;
		/* 确保 TabBar 在最上层 */
		background: #ffffff;
		/* 可选：TabBar 背景色 */
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
		/* 可选：顶部阴影 */
	}

	.new-info {
		font-size: 14px;
		color: #666;
		margin-top: 8px;
		/* 调整间距 */
	}

	.recharge-popup {
		padding: 30rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.recharge-options {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
		margin-bottom: 40rpx;
	}

	.recharge-item {
		position: relative;
		padding: 30rpx;
		border: 2rpx solid #eee;
		border-radius: 12rpx;
		text-align: center;
		transition: all 0.3s;
	}

	.recharge-item.active {
		border-color: #2979ff;
		background-color: #f0f7ff;
	}

	.amount {
		font-size: 40rpx;
		font-weight: bold;
		color: #333;
	}

	.bonus {
		font-size: 24rpx;
		color: #ff6a00;
		margin-top: 10rpx;
	}

	.recommend {
		position: absolute;
		top: -10rpx;
		right: -10rpx;
		background-color: #ff6a00;
		color: white;
		font-size: 20rpx;
		padding: 4rpx 12rpx;
		border-radius: 20rpx;
	}

	.custom-amount {
		margin: 30rpx;
	}

	.recharge-item {
		padding: 20rpx;
		margin: 10rpx;
		border: 2rpx solid #e0e0e0;
		border-radius: 10rpx;
		text-align: center;
		transition: all 0.3s;
	}

	.recharge-item.active {
		border-color: #2979ff;
		background-color: #f0f7ff;
		transform: scale(1.05);
		box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.2);
	}

	.amount {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.bonus {
		font-size: 24rpx;
		color: #ff6a00;
		margin-top: 5rpx;
	}
</style>